<template>
    <div>
        <div class="filter-box">
            <div class="filter-left">
                <el-input
                    v-model.trim="value"
                    maxlength="20"
                    style="width: 300px"
                    size="mini"
                    placeholder="请输入用户名/姓名/手机号"
                ></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" :disabled="loading" :loading="loading"
                           @click="handleSearch">查询
                </el-button>
                <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
            </div>
            <div class="filter-right">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleOpenAddDialog">添加</el-button>
                <el-button type="primary" size="mini" icon="el-icon-delete" @click="handDeleteAll">删除</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            v-loading="loading"
            stripe
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            height="100%"
            :data="tableData"
            tooltip-effect="dark"
            align="center"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" fixed="left" :selectable="selectInit"></el-table-column>
            <el-table-column label="是否启用" width="80">
                <template slot-scope="scope">
                    <el-switch
                        :disabled="scope.row.userType == 1"
                        v-model="scope.row.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="handleChangeUser(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="username" min-width="180"></el-table-column>
            <el-table-column label="姓名" prop="fullName" min-width="180"></el-table-column>
            <el-table-column prop="phone" label="手机号" show-overflow-tooltip min-width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱" show-overflow-tooltip min-width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="180"></el-table-column>
            <el-table-column label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑用户" placement="bottom-start">
                        <el-button type="danger" size="mini" icon="el-icon-edit" v-if="scope.row.userType != 1"
                                   @click="handleOpenUpdateDialog(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="重置密码" placement="bottom-start">
                        <el-button type="danger" size="mini" icon="el-icon-refresh-right" v-if="scope.row.userType != 1"
                                   @click="handleRefreshPassword(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加/编辑用户  -->
        <el-dialog v-el-drag-dialog custom-class="custom-dialog" :visible.sync="dialog" :title="dialogTitleType"
                   width="700px " append-to-body>
            <div style="height: 400px">
                <AddItem v-if="dialog" :is-update="isUpdate" :user-id="currentId" @succeed="handleSucceedAddOrUpdate"
                         @close="handleCloseDialog" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
// components
import AddItem from './addItem'
import { getUserList, deleteUserList, resetUser } from '@/api/system/user'
import { updateUser } from '@/api/system/user'

export default {
    components: {
        AddItem
    },
    data() {
        return {
            loading: true,
            value: '',
            tableData: [],
            pageSize: 10,
            pageNo: 1,
            total: 0,
            selectOptions: [],
            //弹窗
            dialogTitleType: '',
            dialog: false,
            isUpdate: true, //true为修改，false为不修改
            currentId: '' //修改id
        }
    },
    created() {
        this.getData()
    },
    methods: {
        selectInit(row, index) {
            if (row.userType == 1) {
                return false //不可勾选
            } else {
                return true //可勾选
            }
        },
        //获取数据
        getData() {
            this.loading = true
            let obj = {
                pageSize: this.pageSize,
                pageNo: this.pageNo,
                value: this.value
            }
            getUserList(obj)
                .then((res) => {
                    this.loading = false
                    if (res.status != 200) return this.$msgPrompt.error(res.msg)
                    this.tableData = res.obj.records
                    this.total = res.obj.total
                })
                .catch((error) => {
                    this.loading = false
                })
        },
        //查询
        handleSearch() {
            this.pageNo = 1
            this.getData()
        },
        //重置
        handleReset() {
            this.value = ''
        },
        //全选
        handleSelectionChange(val) {
            this.selectOptions = val
        },
        //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.getData()
        },
        // 删除 单/多
        handDeleteAll() {
            if (!this.selectOptions.length) return this.$msgPrompt.warning()
            this.$confirm(this.$confirmMsg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.deleteUser(this.selectOptions.map(i => i.id))
                })
                .catch(() => {
                    this.$msgPrompt.info()
                })
        },
        deleteUser(list) {
            this.$startLoading()
            deleteUserList(list).then((res) => {
                this.$endLoading()
                if (res.status != 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.handleSearch()
            })
        },
        // 开/关弹窗
        handleOpenUpdateDialog(row) {
            this.dialogTitleType = '编辑用户'
            this.currentId = row.id
            this.isUpdate = true
            this.dialog = true
        },
        // 重置用户密码
        handleRefreshPassword(row) {
            this.$startLoading()
            resetUser(row.id).then(res => {
                this.$endLoading()
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
            })
        },
        handleOpenAddDialog() {
            this.dialogTitleType = '添加用户'
            this.isUpdate = false
            this.currentId = ''
            this.dialog = true
        },
        handleCloseDialog() {
            this.dialog = false
        },
        // 添加/修改成功
        handleSucceedAddOrUpdate() {
            this.dialog = false
            this.getData()
        },

        handleChangeUser(row) {
            console.log(row)
            let {
                id,
                username,
                phone,
                fullName,
                email,
                enabled,
                roleIdList
            } = row
            updateUser({
                id,
                username,
                phone,
                fullName,
                email,
                enabled,
                roleIdList
            }).then(res => {
                if (res.status !== 200) {
                    row.enabled = !row.enabled
                    this.$msgPrompt.error(res.msg)
                    return
                }
                this.$msgPrompt.success()
            }).catch(() => {
                row.enabled = !row.enabled
            })
        }
    }
}
</script>
<style scoped lang="scss">
</style>
